<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>添加项目材料</title>
    <%--<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">--%>
    <%--<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">--%>

    <%--<link rel="shortcut icon" href="favicon.ico">--%>
    <link href="<c:url value="/resources/hplus/lib/css/bootstrap.min.css?v=3.3.6"/>" rel="stylesheet">
    <link href="<c:url value="/resources/hplus/lib/css/font-awesome.css?v=4.4.0"/>" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="<c:url value="/resources/hplus/lib/css/plugins/sweetalert/sweetalert.css"/>" rel="stylesheet">
    <!-- jqgrid-->
    <link href="<c:url value="/resources/hplus/lib/css/plugins/jqgrid/ui.jqgrid.css?0820"/>" rel="stylesheet">

    <link href="<c:url value="/resources/hplus/lib/css/animate.css"/>" rel="stylesheet">
    <link href="<c:url value="/resources/hplus/lib/css/style.css?v=4.1.0"/>" rel="stylesheet">

    <style>
        .custom-label {
            text-align: right;
            margin-top: 0px;
        }

        .row-base-info {
            margin-top: 10px;
        }

        ._float {
            float: right;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">

    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#base-info-tab" aria-expanded="true">项目材料</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="base-info-tab" class="tab-pane active">
                        <div class="panel-body">
                            <form class="form-horizontal m-t" id="commentForm" action="" method="post">
                                <input type="hidden" id="projectId" name="projectId" required value="${projectId}">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="panel panel-success">
                                            <div class="panel-heading">
                                                ${project.projectName} - 项目材料 - 添加
                                            </div>
                                            <div class="panel-body">
                                                <!-- 基础数据表格 -->
                                                <div class="row row-base-info">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label for="name"
                                                                   class="col-sm-3 control-label custom-label">材料名称：</label>
                                                            <div class="col-sm-9">
                                                                <input id="name" name="name" type="text"
                                                                       class="form-control">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label for="stuffType"
                                                                   class="col-sm-3 control-label custom-label">材料类型：</label>
                                                            <div class="col-sm-9">
                                                                <select class="form-control" name="stuffType"
                                                                        id="stuffType">
                                                                    <option value="0">-请选择-</option>
                                                                    <c:forEach items="${stuffType}" var="stuffType">
                                                                        <option value="${stuffType.key}">${stuffType.value}</option>
                                                                    </c:forEach>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row row-base-info">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label for="stuffType"
                                                                   class="col-sm-3 control-label custom-label">材料文件：</label>
                                                            <input id="uploadFile" name="uploadFile" type="file"
                                                                   onchange="selectFile(this)" style="display:none">
                                                            <div class="col-sm-7">
                                                                <input id="stuffFile" name="stuffFile" type="text"
                                                                       class="form-control">
                                                            </div>
                                                            <a class="btn btn-success col-sm-2"
                                                               onclick="$('input[id=uploadFile]').click();">选择文件</a>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row row-base-info">
                                                    <div class="col-sm-12">
                                                        <button type="button" class="btn btn-w-m btn-primary _float"
                                                                id="addStuff">保存
                                                        </button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="panel panel-success">
                                        <div class="panel-heading">
                                            ${project.projectName} - 项目材料 - 列表
                                        </div>
                                        <div class="panel-body">
                                            <!-- 基础数据表格 -->
                                            <div class="row row-base-info">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="jqGrid_wrapper">
                                                            <table id="grid_table"></table>
                                                            <div id="grid_pager"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-w-m btn-default" id="return-project-list">返回
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 全局js -->
<script src="<c:url value="/resources/hplus/lib/js/jquery.min.js?v=2.1.4"/>"></script>
<script src="<c:url value="/resources/hplus/lib/js/bootstrap.min.js?v=3.3.6"/>"></script>


<!-- Peity -->
<script src="<c:url value="/resources/hplus/lib/js/plugins/peity/jquery.peity.min.js"/>"></script>

<!-- jqGrid -->
<script src="<c:url value="/resources/hplus/lib/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"/>"></script>
<script src="<c:url value="/resources/hplus/lib/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"/>"></script>

<script src="<c:url value="/resources/lib/jquery/plugin/jquery.form.min.js"/>"></script>

<!-- 自定义js -->
<script src="<c:url value="/resources/hplus/lib/js/content.js?v=1.0.0"/>"></script>
<!-- Sweet alert -->
<script src="<c:url value="/resources/hplus/lib/js/plugins/sweetalert/sweetalert.min.js"/>"></script>
<script src="<c:url value="/resources/hplus/lib/js/plugins/validate/jquery.validate.min.js"/>"></script>
<script src="<c:url value="/resources/hplus/lib/js/plugins/validate/messages_zh.min.js"/>"></script>

<!-- layer javascript -->
<script src="<c:url value="/resources/hplus/lib/js/plugins/layer/layer.min.js"/>"></script>

<script src="<c:url value="/resources/hplus/lib/js/plugins/layer/laydate/laydate.js"/>"></script>

<!-- Page-Level Scripts -->
<style>

    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
        height:auto;
    }

</style>
<script>
    $(document).ready(function () {

        var icon = "<i class='fa fa-times-circle'></i> ";

        $("#return-project-list").click(function () {
            window.location.href = "<c:url value="/admin/billionProject/list.action"/>";
        });


        $("#commentForm").validate({
            rules: {
                name: {
                    required: true
                },
                stuffType: {
                    required: true
                },
                stuffFile: {
                    required: true
                },
                uploadFile: {
                    required: true
                },
            },
            messages: {
                name: {
                    required: icon + "请输入材料名称"
                },
                stuffType: {
                    required: icon + "请悬着材料类型"
                },
                stuffFile: {
                    required: icon + "请选择上传文件"
                },
                uploadFile: {
                    required: icon + "请选择上传文件"
                }
            }
        });

        $("#addStuff").click(function () {
            var validator = $("#commentForm").validate();
            var _stuffFile = $("#stuffFile").val();
            if (_stuffFile != undefined && _stuffFile != "") {
                var reg1 = /[^\.](\.xls)$/i;
                var reg2 = /[^\.](\.xlsx)$/i;
//                var reg3 = /[^\.](\.mp4)$/i;
//                var reg4 = /[^\.](\.mov)$/i;
//                var reg5 = /[^\.](\.avi)$/i;
                var reg6 = /[^\.](\.pdf)$/i;
                var reg7 = /[^\.](\.doc)$/i;
                var reg8 = /[^\.](\.docx)$/i;
                var reg9 = /[^\.](\.ppt)$/i;
                var reg10 = /[^\.](\.pptx)$/i;
                var reg11 = /[^\.](\.png)$/i;
                var reg12 = /[^\.](\.jpg)$/i;
                var reg13 = /[^\.](\.gif)$/i;
                var reg14 = /[^\.](\.txt)$/i;
                if (!reg1.test(_stuffFile) && !reg2.test(_stuffFile)&& !reg6.test(_stuffFile) && !reg7.test(_stuffFile) && !reg8.test(_stuffFile) && !reg9.test(_stuffFile) && !reg10.test(_stuffFile) && !reg11.test(_stuffFile) && !reg12.test(_stuffFile) && !reg13.test(_stuffFile)&& !reg14.test(_stuffFile)) {
                    swal('提示信息', '请选择正确的文件格式,如xls/xlsx/pdf/doc/docx/ppt/pptx/png/jpg/gif/txt', "error")
                    return;
                }
            } else {
                swal('提示信息', '未选择需要上传的文件', "error")
                return;
            }
            if (validator.form()) {  // 验证结果
                var options = {
                    url: "<c:url value="/admin/resource/bpFileUpload.json"/>",
                    success: function (data) {
                        if (data.status == 0) {
                            emptied();
                            swal("操作成功！", data.msg, "success");
                        } else {
                            parent.layer.msg(data.msg, {shift: 6});
                        }
                        $(grid_table).trigger("reloadGrid");
                    }
                };
                $("#commentForm").ajaxSubmit(options);
            }
        });

        // 加载表格
        $.jgrid.defaults.styleUI = 'Bootstrap';

        var grid_table = "#grid_table";
        var grid_pager = "#grid_pager";

        $(grid_table).jqGrid({
            url: "<c:url value="/admin/resource/bpListJson.json"/>",
            mtype: "POST",
            datatype: "json",
            height: "auto",
           autowidth: true,
            shrinkToFit: true,
            multiselect: false,
            multiboxonly: false,
            postData: {"projectId": $("#projectId").val()},
            beforeSelectRow: beforeSelectRow,//js方法
            rowNum: 5,
            colNames: ['序号', '资料名', '文件类型', '资料类型', '上传时间', '下载地址', '操作'],
            colModel: [
                {
                    name: 'id',
                    index: 'id',
                    align: 'left',
                    editable: true,
                    sortable: true,
                    sorttype: "int",
                    search: false
                },
                {name: 'resName', index: 'resName', editable: true, align: 'left'},
                {name: 'resTypeName', index: 'resType', editable: true, align: 'left'},
                {name: 'stuffTypeName', index: 'stuffType', editable: true, align: 'left'},
                {
                    name: 'createTime',
                    index: 'createTime',
                    align: 'left',
                    editable: true,
                    sortable: true,
                    sorttype: "date",
                    search: false,
                    formatter: "date",
                    formatoptions: {srcformat: 'Y-m-d H:i:s', newformat: 'Y-m-d H:i:s'}
                },
                {name: 'resPath', index: 'resPath', formatter: aFormat, editable: true, align: 'left'},
                {
                    name: 'action',
                    index: 'action',
                    label: "操作",
                    width: '60px',
                    align: 'left',
                    editable: false,
                    search: false,
                    sortable: false
                }
            ],
            pager: grid_pager,
            viewrecords: true,
            add: true,
            edit: true,
            addtext: 'Add',
            edittext: 'Edit',
            hidegrid: false,
            gridComplete: function () {
                var ids = $(grid_table).jqGrid('getDataIDs');

                for (var i = 0; i < ids.length; i++) {
                    var resName = $(grid_table).jqGrid('getRowData', ids[i]).resName;
                    $(grid_table).jqGrid('setRowData', ids[i], {
                        action: "<button class='btn btn-xs btn-danger del' id='del_" + ids[i] + "' onclick='del(" + ids[i] + ",\"" + resName + "\")'><i class='fa fa-times'></i>" + "删除" + "</button>"
                    });
                }
            }
        });


        // Add selection
        $(grid_table).setSelection(4, true);

        // Setup buttons
        $(grid_table).jqGrid('navGrid', grid_pager, {
            edit: false,
            add: false,
            del: false,
            search: false
        }, {
            height: 200,
            reloadAfterSubmit: true
        });

        // Add responsive to jqGrid
        $(window).bind('resize', function () {
            var width = $('.jqGrid_wrapper').width();
            $(grid_table).setGridWidth(width);
        });

    });

    function selectFile(fnUpload) {
        var filename = fnUpload.value;
        $("#stuffFile").val(filename);
    }
    ;

    function beforeSelectRow() {
        $("#grid_table").jqGrid('resetSelection');
        return (true);
    }

    function aFormat(cellvalue, options, rowObject) {


        return "<a href='" + cellvalue + "' download=''>点击下载</a>";
    }

    function del(id, delName) {
        swal({
            title: "您确认删除 [" + delName + "]？",
            text: "删除后将无法恢复，请谨慎操作！",
            type: "warning", showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的，我要删除！",
            cancelButtonText: "让我再考虑一下…",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm) {
                $.post('<c:url value="/admin/resource/delete.action"/>', {id: id}, function (data) {
                    $(grid_table).trigger("reloadGrid");
                    swal("删除成功！", "您已经永久删除了这条信息。", "success")
                }, 'JSON');
            } else {
                swal("已取消", "您取消了删除操作！", "error")
            }
        });
    }

    function emptied() {
        $("#name").val("");
//        $("#stuffType").val("");
        $("#stuffFile").val("");
        $("#uploadFile").val("");
    }

</script>
</body>
</html>